

<template>
    <el-card class="box-card">
        <el-button type="primary">添加角色</el-button>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px">
        <el-table :data="roleList" border style="width: 100%">
            <el-table-column prop="rname" label="名称" />
            <el-table-column prop="rname" label="名称" v-slot="{ row }">
                <el-button type="primary" @click="handleEdit(row._id)">编辑权限</el-button>
            </el-table-column>
        </el-table>

    </el-card>
</template>

<script setup>
import { onMounted, ref } from "vue"
import api from "../../utils/request"
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router"

const roleList = ref([])
const router = useRouter()

onMounted(() => {
    getData()
})
//获取数据
const getData = async () => {
    let result = await api.get("/js/role")
    roleList.value = result.data.data

}


//
const handleEdit = (id) => {
    router.push(`/home/roleEdit/${id}`)




}



</script>

<style lang="less" scoped>
.box-card {
    width: 90%;
}
</style>